<template>
  <div class="login-container">
    <!-- 头部校徽 -->
    <div class="header">
      <el-image :src="logo" fit="contain" class="logo" />
      <span class="title">日 照 市 卫 生 学 校</span>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <div class="left-panel">
        <el-image :src="illustration" fit="contain" />
      </div>
      <div class="divider"></div>
      <div class="login-box">
        <div class="login-type-bar" style="margin-bottom: 70px;">
          <span class="login-type-active">账号登录</span>
          <span class="login-type-passive">扫码登录</span>
        </div>
        <el-form 
          :model="form" 
          :rules="rules" 
          ref="loginForm"
          @keyup.enter="handleLogin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              placeholder="请输入您的账号"
              prefix-icon="User"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入您的密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <div class="form-options">
            <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
               <el-link type="primary" :underline="false" @click="showForgotPasswordDialog">忘记密码?</el-link>
          </div>

          <el-button 
            type="primary" 
            class="login-btn" 
            :loading="loading"
            @click="handleLogin"
          >
            登录
          </el-button>
        </el-form>
      </div>
    </div>

    <!-- 底部版权 -->
    <!-- <div class="footer">
      <p>©2025 日照市卫生学校 ALL RIGHTS RESERVED</p>
      <p>鲁ICP证14057276号-1</p>
    </div> -->
      <el-dialog
        v-model="forgotPasswordDialogVisible"
        title="找回密码"
        width="400px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="forgot-password-dialog"
      >
        <div class="dialog-content">
          <p class="dialog-title">如需找回密码，请联系管理员</p>
          <p class="contact-phone">
            <el-icon><Phone /></el-icon>
            18063139995
          </p>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="forgotPasswordDialogVisible = false">关闭</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { login as loginApi } from '@/api/auth'
import logo from '@/assets/logo.png'
import illustration from '@/assets/illustration.png'
import { Phone } from '@element-plus/icons-vue'
  
// 响应式数据
const loginType = ref('account')
const rememberPwd = ref(false)
const loading = ref(false)
const qrcodeCanvas = ref(null)
const form = reactive({
  username: '',
  password: ''
})

// 新增弹窗显示函数
const forgotPasswordDialogVisible = ref(false)
const showForgotPasswordDialog = () => {
  forgotPasswordDialogVisible.value = true
}
// 表单验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur' }
  ]
})

// 登录处理
const router = useRouter()
const handleLogin = async () => {
  loading.value = true
  try {
    const res = await loginApi({
      username: form.username,
      password: form.password,
      source: 'web'
    })
    console.log(res)
    if (res && (res.code === 0 || res.success || res.token)) {
      // 存储token和用户信息
      if (res.token) {
        localStorage.setItem('token', res.token)
      }
      if (res.user) {
        localStorage.setItem('user', JSON.stringify(res.user))
      }
      ElMessage.success('登录成功')
      router.push('/dashboard')
      if (rememberPwd.value) {
        localStorage.setItem('loginInfo', JSON.stringify(form))
      }
    } else {
      ElMessage.error(res.message || '登录失败')
    }
  } catch (error) {
    ElMessage.error(error.message || '登录失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  background: #1a2b4e;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  .header {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    .logo {
      width: 200px;
      height: 200px;
    }
    .title {
      color: white;
      font-size: 40px;
      font-weight: 500;
    }
  }

  .main-content {
    width: 800px;
    height: 420px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    display: flex;
    overflow: hidden;
    margin-top: 40px;
    align-items: stretch;

    .left-panel {
      flex: 0.7;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f6fafd;
      padding: 32px 16px;
      box-sizing: border-box;
      .el-image {
        width: 100%;
        object-fit: contain;
        background: transparent;
        border-radius: 12px;
        box-shadow: none;
      }
    }
    .divider {
      width: 1px;
      background: #222;
      opacity: 0.12;
      margin: 32px 0;
    }
    .login-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 32px 32px 32px 32px;
      background: #fff;
      .login-type-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        .login-type-active {
          font-size: 20px;
          font-weight: 600;
          color: #409eff;
          border-bottom: 2px solid #409eff;  /* 底部边框（颜色与文字一致） */
          padding-bottom: 4px;              /* 可选：增加文字与横线间距 */
          display: inline-block;           /* 确保边框能正确显示 */
          width: 120px;  /* 手动控制长度（数值根据需求调整）*/
          text-align: center; /* 文字居中（若宽度固定时建议添加）*/
        }
        .login-type-passive {
          font-size: 20px;
          font-weight: 500;
          color: #909399;
          user-select: none;
        }
      }
      .form-options {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
      }
      .login-btn {
        width: 100%;
        height: 45px;
        font-size: 16px;
      }
    }
  }

  .footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    line-height: 1.6;
  }
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border-radius: 0;
  border-bottom: 1px solid #dcdfe6;
  background: transparent;
  
  // 输入框提示文字样式
  .el-input__inner::placeholder {
    color: #999;
    font-size: 14px;
  }

  // 聚焦时的下划线颜色
  &.is-focus {
    border-bottom-color: #409eff;
  }
}

// 登录按钮样式
.login-btn {
  background: #409eff;
  border-radius: 4px;
  font-size: 16px;
  letter-spacing: 2px;
  
  &:hover {
    background: #66b1ff;
  }
  
  // 保持加载状态样式一致
  &.is-loading {
    opacity: 0.8;
  }
}

// 调整表单间距
.el-form-item {
  margin-bottom: 30px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

// 修改输入框样式
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border-radius: 8px;  // 增加圆角
  border: 1px solid #DCDFE6; // 全边框
  background: #F5F7FA !important; // 浅灰色背景
  height: 48px;  // 增加高度
  padding: 0 16px;

  // 提示文字样式
  .el-input__inner::placeholder {
    color: #909399;
    font-size: 14px;
    letter-spacing: 0.5px;
  }

  // 聚焦状态
  &.is-focus {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64,158,255,0.1) !important;
  }

  // 图标颜色
  .el-input__prefix-inner {
    .el-icon {
      color: #909399;
      font-size: 18px;
      margin-right: 8px;
    }
  }
}

// 修改按钮样式
.login-btn {
  background: linear-gradient(135deg, #409EFF, #3375B9); // 渐变色
  border-radius: 8px !important; // 更大圆角
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 500;
  letter-spacing: 1px;
  border: none !important;
  transition: all 0.3s;

  &:hover {
    background: linear-gradient(135deg, #66B1FF, #409EFF);
    box-shadow: 0 4px 12px rgba(64,158,255,0.3);
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }

  // 加载状态
  &.is-loading {
    opacity: 0.8;
    &:hover {
      transform: none;
    }
  }
}

// 调整表单项间距
.el-form-item {
  margin-bottom: 30px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

// 修改输入框样式
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border-radius: 0; // 移除圆角
  border: none; // 移除边框
  border-bottom: 1px solid #E4E7ED; // 灰色下边框，使用ElementUI的border-color-light
  background: transparent !important; // 透明背景
  height: 48px;  // 保持较高的输入框高度

  // 输入框内文本样式
  .el-input__inner {
    font-size: 16px; // 放大输入框文字大小
  }

  // 提示文字样式
  .el-input__inner::placeholder {
    color: #909399;
    font-size: 16px; // 放大提示文字大小
    letter-spacing: 0.5px;
  }

  // 聚焦状态
  &.is-focus {
    border-bottom-color: #409EFF; // 聚焦时底部边框变色
    box-shadow: none !important;
  }

  // 图标样式
  .el-input__prefix-inner {
    .el-icon {
      color: #909399;
      font-size: 22px; // 放大图标
      margin-right: 10px; // 增加图标与文字间距
    }
  }
}

// 修改按钮样式 - 增加圆角效果
.login-btn {
  background: linear-gradient(135deg, #409EFF, #3375B9); // 渐变色
  border-radius: 24px !important; // 更大圆角，设置为高度的一半实现完全圆角
  height: 48px !important;
  font-size: 16px !important;
  font-weight: 500;
  letter-spacing: 1px;
  border: none !important;
  transition: all 0.3s;

  &:hover {
    background: linear-gradient(135deg, #66B1FF, #409EFF);
    box-shadow: 0 4px 12px rgba(64,158,255,0.3);
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }

  // 加载状态
  &.is-loading {
    opacity: 0.8;
    &:hover {
      transform: none;
    }
  }
}

// 忘记密码弹窗样式
:deep(.forgot-password-dialog) {
  border-radius: 16px;
  overflow: hidden;
  
  .el-dialog__header {
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid #E4E7ED;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .el-dialog__body {
    padding: 32px 24px;
  }
  
  .dialog-content {
    text-align: center;
    
    .dialog-title {
      font-size: 16px;
      color: #606266;
      margin-bottom: 24px;
    }
    
    .contact-phone {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 24px;
      font-weight: 600;
      color: #409EFF;
      
      .el-icon {
        font-size: 20px;
      }
    }
  }
  
  .dialog-footer {
    padding: 16px 24px;
    border-top: 1px solid #E4E7ED;
    text-align: right;
    
    .el-button {
      padding: 10px 24px;
      font-size: 14px;
      border-radius: 4px;
      
      &:hover {
        background: #f5f7fa;
      }
    }
  }
}
</style>